<template>
    <div class="navi" style="overflow-y:scroll;height: 100vh;white-space: nowrap;">
        <el-menu
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            collapse-transition="true"
            active-text-color="#ffd04b"
            background-color="#545c64"
            text-color="#fff"
            unique-opened="true"
            :open="openIndex"
            style="height:100%;background-color:#545c64"
        >
            <el-menu-item index="9999" >
                <img v-if="!isCollapse" src="https://practice-brushing-1318264134.cos.ap-chengdu.myqcloud.com/images/logo/login.png" alt="" style="width:100%;height: 80%;">
                <img v-else src="https://practice-brushing-1318264134.cos.ap-chengdu.myqcloud.com/images/logo/UG_P8%28%25708%25%240%25%5D%40P%5BH%7BBWV%281%29.png" alt="" style="width:100%;height: 80%;">
            </el-menu-item>
            <template v-for="(item,index) in navList" :key="index" >
                <el-sub-menu :index="index+1" v-if="item.content != undefined && item.content.length > 0">
                    <template #title >
                        <i :class="item.icon != ''? 'iconfont '+item.icon : 'iconfont icon-a-bijibenbiji'"   style="font-size: 16px;margin-right:15px;"></i>
                        <span>{{ item.name }}</span>
                    </template>
                    <template v-for="(item2,index2) in navList[index].content" :key="index2">
                        <el-menu-item :index="(index+1)*99+index2" :class="$store.state.nowIndex == (index+1)*99+index2 ? 'before' : 'after2'"  @click="addTab(item2.name,item2.url,(index+1)*99+index2)" style="padding-left:50px;">{{item2.name }}</el-menu-item>
                    </template>
                </el-sub-menu>
                <el-menu-item  @click="addTab(item.name,item.url,index+1)" v-else :class="$store.state.nowIndex == index+1 ? 'before' : 'after'">
                    <i :class="item.icon != ''? 'iconfont '+item.icon : 'iconfont icon-a-bijibenbiji'" style="font-size: 16px;margin-right:15px"></i>
                    <template #title >{{ item.name }}</template>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
        
export default {
    name:"LeftNavigation",
    props:['pageRouter','navList','isCollapse','addTab','getNowTag'],
    data() {
      return {
      };
    },
    methods:{
       
    },
    mounted(){
    },
    watch:{
       
    }
}
</script>

<style scoped>
/* 隐藏滚动条 */
   ::-webkit-scrollbar {
     width: 0 !important;height: 0;
   }

    .after{
        background-color: #545c64;
        color:#fff !important
    }
    .after2{
        background-color: #676f77;
        color:#fff !important
    }
    .before{
        background-color: #303133;
        color:#ffd04b !important
    }
</style>